<template>
  <div class="box">
    <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addFormRef"
      label-width="88px"
      status-icon
    >
      <el-form-item label="会员姓名:" prop="name">
        <el-input v-model="addForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="addForm.password" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别:" prop="sex">
         <el-input v-model="addForm.sex" clearable></el-input>
      </el-form-item>

      <el-form-item label="手机号码:" prop="tel">
        <el-input v-model="addForm.tel" clearable></el-input>
      </el-form-item>

      <el-form-item label="身份证:" prop="id_card">
        <el-input v-model="addForm.id_card" clearable></el-input>
      </el-form-item>
    </el-form>
 
    <span slot="footer" class="dialog-footer">
      
      <!-- <el-button @click="addDialogVisible = false" style="margin-left:15%"
        >取 消</el-button
      > -->
	  <el-button type="primary" @click="addUser"
        >确 定</el-button
      >
    </span>
  </div>
</template>
<script>

import axios from "axios";

export default {
  data() {
    //验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      //   验证手机号的正则表达式
      const regMobile = /^([0|86|17951])?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的手机号"));
    };
    //验证身份证号的规则
    var checkSfz = (rule, value, cb) => {
      //   验证身份证号的正则表达式
      const regMobile = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (regMobile.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法的身份证号码"));
    };
    return {
      addForm: {
        name: "",
        password: "",
        sex:'',
        tel: "",
        id_card: ""
      },
      form: {
        resource: ""
      },
      addFormRules: {
        name: [
          {
            required: true,
            message: "请输入会员姓名",
            trigger: "blur"
          },
          {
            min: 2,
            max: 10,
            message: "用户名的长度在3-10个字符之间",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 15,
            message: "密码的长度在-15个字符之间",
            trigger: "blur"
          }
        ],
        sex: [
          {
            required: true,
            message: "请输入性别编号",
            trigger: "blur"
          },
          {
            min: 1,
            max: 1,
            message: "长度1个字符",
            trigger: "blur"
          }
        ],
        tel: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          },
          {
            validator: checkMobile,
            trigger: "blur"
          }
        ],

        id_card: [
          {
            required: true,
            message: "请输入身份证号码",
            trigger: "blur"
          },
          {
            validator: checkSfz,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
     addUser() {
       this.$refs.addFormRef.validate(valid=>{
         if(valid)return this.$message.success('新增成功');
         this.$message.error('新增失败');
         console.log(valid)
       })
       let obj =this.addForm
      this.$axios({
        url:'/website/userController/userNew',
        method:'post',
        data:obj
      }).then(res=>{
        console.log(res.data)
      })
      this.addForm={}
    }
  }
};
</script>

<style scoped>
.box {
  width: 600px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
}
.dialog-footer{
   position: absolute;
  left: 50%;
}
</style>
